<template>
  <div class="left">
    <!-- 异常数据 -->
    <div class="left_top flex justify-between">
      <div
        v-for="(item, index) in imgList"
        :key="index"
        :class="['left_top_item ', 'flex', 'items-center']"
        :style="[
          {
            backgroundImage:
              index == popoverIdx
                ? `url(${getImageUrl(styleOptine[popoverIdx][0])})`
                : `url(${getImageUrl('lsd_top_left.png')})`
          }
        ]"
        @click="handleBg(item, index)"
      >
        <img :src="getImageUrl(item.url)" alt="" class="ml-1.5 w-11 h-11"/>
        <div class="ml-3">
          <p class="text-xl mt-2 font-semibold text-white">{{ item.value }}</p>
          <p class="text-xs">{{ item.text }}</p>
        </div>
      </div>
      <!-- 弹出窗 -->
      <div class="popover" v-if="popoverIdx != 5">
        <div class="popover_item flex items-center">
          <div class="flex items-center">
            <svg aria-hidden="true" class="w-6 h-6 ml-2">
              <use :xlink:href="`#icon-${styleOptine[popoverIdx][1]}`"/>
            </svg>
            <span class="text-white">{{ styleOptine[popoverIdx][2] }}</span>
          </div>
          <div class="flex items-center ml-52">
            <img class="popover_zs" :src="getImageUrl(styleOptine[popoverIdx][3])" alt=""/>
            <svg aria-hidden="true" class="w-3 h-3 ml-4 cursor-pointer" @click="popoverIdx = 5">
              <use :xlink:href="`#icon-${styleOptine[popoverIdx][4]}`"/>
            </svg>
          </div>
        </div>
        <!-- 动画 -->
        <Decoration4 :reverse="true" style="width: 100%; height: 7px"/>
        <!-- 表格 -->
        <div class="tab mt-2">
          <el-table
            :data="
              popoverIdx == 0
                ? heartWarn
                : popoverIdx == 1
                ? spO2Warn
                : popoverIdx == 2
                ? breathWarn
                : []
            "
            style="width: 100%"
            :header-row-style="rowClass"
            :border="false"
            :max-height="490"
            @row-click="Rowclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column
              prop="patientName"
              label="预警事由"
              width="150"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <span style="color: #f53f3f">{{ row.warnContent }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="patientName" label="姓名" width="80"/>
            <el-table-column prop="bedNo" label="床位号" width="80"/>
            <el-table-column prop="deptName" label="科室" width="100"/>
            <el-table-column prop="createTime" label="预警时间" :show-overflow-tooltip="true"/>
          </el-table>
        </div>
        <!-- btn -->
        <div class="btn">
          <span
            class="btn_item cursor-pointer"
            :style="{ background: styleOptine[popoverIdx][5] }"
            @click="handleWarning(1)"
          >立即处理</span
          >
          <span class="btn_item cursor-pointer" @click="handleWarning(2)">稍后处理</span>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="left_botton mt-6">
      <div class="flex justify-between">
        <h1 class="text-white text-xl">患者管理 {{ patList.length }}</h1>
        <div class="search">
          <el-input
            placeholder="姓名/床位号/身份证号"
            prefix-icon="search"
            v-model="keyWord"
            @keyup.enter="getList"
            clearable
            @clear="getList"
          />
        </div>
      </div>
      <!-- 滚动数据 -->
      <Vue3SeamlessScroll
        class="scroll"
        :step="scrollOption.step"
        :list="patList"
        :isWatch="scrollOption.isWatch"
        :limitScrollNum="scrollOption.limitScrollNum"
        :wheel="scrollOption.wheel"
        :hover="scrollOption.hover"
      >
        <div
          class="patient_item text-white cursor-pointer"
          v-for="(item, index) in patList"
          :key="index"
          @click="handlePat(item, index)"
        >
          <div class="flex justify-center relative">
            <h1>{{ item.patientName }} - {{ item.deptName }} {{ item.bedNo }}</h1>
            <svg aria-hidden="true" class="w-6 h-6 absolute right-3">
              <use xlink:href="#icon-patient_hosp"/>
            </svg>
          </div>
          <div class="flex mt-8 justify-around">
            <div class="w-2/4 pl-6">
              <div class="flex justify-between">
                <div class="flex">
                  <svg aria-hidden="true" class="w-6 h-6">
                    <use xlink:href="#icon-mattress"/>
                  </svg>
                  <h2 class="ml-2">床垫</h2>
                </div>
                <span class="mr-5">{{ item.monitorPadScreenData?.acquisitionTime || '--' }}</span>
              </div>
              <div class="flex flex-wrap mt-3">
                <div class="w-2/4">
                  <span class="text-xs">呼吸</span>
                  <span class="ml-8 text-sm font-bold">{{
                      item.monitorPadScreenData?.breathRate || '--'
                    }}</span>
                </div>
                <div class="w-2/4">
                  <span class="text-xs">心率</span>
                  <span class="ml-8 text-sm font-bold">{{ item.monitorPadScreenData?.heartRate || '--' }}</span>
                </div>
                <div class="w-2/4">
                  <span class="text-xs">血氧</span>
                  <span class="ml-8 text-sm font-bold">{{ item.monitorPadScreenData?.spo2 || '--' }}</span>
                </div>
                <div class="w-2/4">
                  <span class="text-xs">体动</span>
                  <span class="ml-8 text-sm font-bold">{{
                      item.monitorPadScreenData?.bodyMove == '1'
                        ? '正常'
                        : item.monitorPadScreenData?.bodyMove == '2'
                          ? '体动'
                          : '--'
                    }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Vue3SeamlessScroll>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, reactive, ref} from 'vue'
import {getImageUrl} from '@/utils'
import {Vue3SeamlessScroll} from 'vue3-seamless-scroll'
import {Decoration4} from '@kjgl77/datav-vue3'
import {getPat, getPatSign, getWarn, handleWarn} from '@/api/lsd'
import {toRefs} from 'vue'
import {useLsdStore} from '@/store/modules/lsd'
import {ElMessage} from 'element-plus'

const useLsd = useLsdStore()

const scrollOption = reactive({
  step: 0.4, //步进速度
  imgList: [],
  isWatch: true, //开启数据更新监听
  limitScrollNum: 5, //开启滚动的数据量，只有列表长度大于等于该值才会滚动
  wheel: true, //在开启鼠标悬停的情况下是否开启滚轮滚动
  hover: true //是否开启鼠标悬停
})

const time: any = ref(null)
const patList: any = ref([]) //患者列表
const keyWord: any = ref('') //关键字
const warnData = reactive({
  heartWarn: [], //心率警告列表
  spO2Warn: [], //血氧浓度警告列表
  breathWarn: [] //呼吸率警告列表
})
const warnArr = ref([]) //处理预警数组
const patIdx = ref(0)

const {heartWarn, spO2Warn, breathWarn} = toRefs(warnData)
const popoverIdx = ref(5)

//预警样式
const styleOptine = reactive([
  ['hr_active.png', 'hr', '心率预警', 'hr_zs.png', 'purple_close', '#722ED1'],
  ['sa_active.png', 'hr', '血氧预警', 'sa_zs.png', 'pink_close', '#F5319D'],
  ['resp_active.png', 'hr', '呼吸预警', 'resp_zs.png', 'green_close', '#00B42A'],
  ['lsd_top_left', 'hr', '呼吸预警', 'hr_zs.png', 'purple_close', '#722ED1']
])

const imgList = reactive([
  {
    url: 'avgHr.png',
    text: '心率预警(条)',
    value: '0'
  },
  {
    url: 'avgSaO2.png',
    text: '血氧预警(条)',
    value: '0'
  },
  {
    url: 'resp.png',
    text: '呼吸预警(条)',
    value: '0'
  }
])

const rowClass = reactive({
  background: 'rgba(255, 255, 255, 0.1)',
  color: 'rgba(255, 255, 255, 0.7)'
})

//点击患者存储信息
const handlePat = (obj: any, idx: number) => {
  useLsd.setPatActive(obj)
  getPatSignData(obj.visitNoStr)
  patIdx.value = idx
}

//改变预警背景
const handleBg = (e: any, idx: number) => {
  if (popoverIdx.value == idx) {
    popoverIdx.value = 5
  } else {
    popoverIdx.value = idx
  }
}

/** 查询患者列表 */
const getList = () => {
  getPat(keyWord.value).then((res: any) => {
    patList.value = res.data
    if (patList.value.length > 0) {
      useLsd.setPatActive(patList.value[patIdx.value]) //默认第一个
      getPatSignData(patList.value[patIdx.value].visitNoStr)
    }
  })
}
/** 查询预警列表 */
const getWarnList = () => {
  getWarn().then((res: any) => {
    let {
      heartWarn: heartWarnRes,
      spO2Warn: spO2WarnRes,
      breathWarn: breathWarnRes
    } = res.data
    heartWarn.value = heartWarnRes
    spO2Warn.value = spO2WarnRes
    breathWarn.value = breathWarnRes

    imgList[0].value = heartWarnRes?.length || 0
    imgList[1].value = spO2WarnRes?.length || 0
    imgList[2].value = breathWarnRes?.length || 0
  })
}

/** 就诊号查询患者体征数据 */
const getPatSignData = (patientIdStr: string) => {
  getPatSign(patientIdStr).then((res: any) => {
    useLsd.setPatData(res.data)
  })
}

//点击预警表格
const Rowclick = (e) => {
  keyWord.value = e.visitNoStr
  getList()
}

//定时刷新预警
time.value = setInterval(() => {
  getWarnList()
  getList()
}, 15000)

const handleSelectionChange = (selection: any) => {
  selection.forEach((val) => {
    let data = {
      warnId: val.id, //预警id
      warnType: val.warnType, //预警类型
      handleWay: 1 //
    }
    warnArr.value.push(data)
  })
}

const handleWarning = (type: 1 | 2) => {
  if (warnArr.value.length <= 0) {
    ElMessage.error('请勾选需处理患者！')
    return
  }
  warnArr.value.forEach((val: any) => {
    val.handleWay = type
  })
  handleWarn(warnArr.value).then(() => {
    ElMessage.success('处理成功！')
    getWarnList()
  })
}
//页面销毁关闭定时器
onBeforeUnmount(() => {
  clearInterval(time.value)
  time.value = null
  console.log('页面注销了')
})

getList()
getWarnList()
</script>

<style scoped lang="less">
.left {
  width: 1280px;

  .left_top {
    position: relative;

    .left_top_item {
      width: 141px;
      height: 96px;
      background-size: cover;
      background-position: center center;
      color: #dfdfdf;
      cursor: pointer;
    }

    .popover {
      width: 100%;
      height: 647px;
      position: absolute;
      left: 0;
      top: 106px;
      background-image: url(@/assets/imgs/popover_bg.png);
      background-size: cover;
      background-position: center center;
      z-index: 999;
      transition: 0.3s;

      .popover_item {
        width: 100%;
        height: 50px;

        .popover_zs {
          width: 250px;
          height: 22px;
        }
      }

      .btn {
        position: absolute;
        right: 0px;
        bottom: 18px;

        .btn_item {
          width: 88px;
          line-height: 32px;
          border-radius: 2px;
          color: #fff;
          background: rgba(255, 255, 255, 0.16);
          text-align: center;
          display: inline-block;
          margin-right: 17px;
        }
      }
    }
  }

  .search {
    width: 307px;
    height: 38px;
    background-image: url(@/assets/imgs/search.png);
    background-size: cover;
    background-position: center center;
  }

  .scroll {
    width: 100%;
    height: 800px;
    overflow: hidden;
    margin-top: 16px;
  }

  .patient_item {
    width: 100%;
    height: 168px;
    background-image: url(@/assets/imgs/patient2.png);
    background-size: cover;
    background-position: center center;
    margin-bottom: 16px;
    // padding: 17px;
    padding: 17px 0 17px 0;
    box-sizing: border-box;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    /* Other transform properties here */
  }
}
</style>
<style lang="less">
.el-input__wrapper {
  height: 38px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.tab {
  .el-table,
  th.el-table__cell,
  td.el-table__cell,
  .el-table__row {
    background-color: transparent !important;
    border-bottom: none !important;
    color: #fff;
  }

  .el-table__inner-wrapper::before {
    display: none;
  }
}
</style>
